<template>
  <div class="_wz_operationRecords">
    <template v-if="riskInspectItemProcessList.length > 0">
      <TimelineItem v-for="(item, index) in riskInspectItemProcessList" :key="index">
        <div class="content _wz_ztList_cont">
          <template v-if="item.riskInspectItemProcess == 1">
            <Card dis-hover :bordered="true" style="margin:0 0 10px;">
              <p slot="title">隐患上报 （{{ item.riskInspectItem.riskInspectItemUserName }} -- {{ item.riskInspectItem.riskInspectItemInOrgName }}）</p>
              <div slot="extra">
                <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemState == 1">已排查</Tag>
                <Tag color="error" v-else>未排查</Tag>
              </div>
              <div>
                <Row>
                  <Col span="18" style="width: calc(100% - 175px);">
                  <!--                    <div>-->
                  <!--                      排查状态：-->
                  <!--                      <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemState == 1">已排查</Tag>-->
                  <!--                      <Tag color="error" v-else>未排查</Tag>-->
                  <!--                    </div>-->
                  <div>
                    隐患等级：
                    <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemLv == 0">无风险</Tag>
                    <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemLv == 1">一般隐患</Tag>
                    <Tag color="error" v-else-if="item.riskInspectItem.riskInspectItemLv == 2">重大隐患</Tag>
                  </div>
                  <div>
                    排查描述：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemContext ? item.riskInspectItem.riskInspectItemContext : '--' }}</span>
                  </div>
                  <div>
                    排查时间：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemTime ? item.riskInspectItem.riskInspectItemTime : '--' }}</span>
                  </div>
                  </Col>
                  <Col span="6" style="width: 175px;">
                  <div>
                    <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!item.riskInspectItem.riskInspectItemSign">
                      <div class="_wz_insertimage" style="display: block;width: 100%;">

                        <Image :src="!!item.riskInspectItem.riskInspectItemSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemSign : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.riskInspectItem.riskInspectItemSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemSign : 'img/zwtpxd.png']" />

                      </div>
                    </div>
                  </div>
                  </Col>
                  <Col span="24">
                  <div>
                    隐患图片：
                    <template v-if="!!item.riskInspectItem.riskInspectItemImg">
                      <div style="width: 50px;overflow: hidden;display: inline-block;margin-right: 4px;vertical-align: top;" v-for="(item, index) in JSON.parse(item.riskInspectItem.riskInspectItemImg)">
                        <div class="_wz_insertimage" style="display: block;width: 50px;height: 35px;">
                          <Image :src="!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png']" />
                        </div>
                      </div>
                    </template>
                  </div>
                  </Col>
                </Row>
              </div>
            </Card>
          </template>
          <template v-if="item.riskInspectItemProcess == 2">
            <Card dis-hover :bordered="true" style="margin:0 0 10px;">
              <p slot="title">隐患核查（{{ item.riskInspectItem.riskInspectItemCheckUserName }} -- {{ item.riskInspectItem.riskInspectItemCheckInOrgName }}）</p>
              <div slot="extra">
                <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemCheckState == 1">已核查</Tag>
                <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemCheckState == -1">已退回</Tag>
                <Tag color="error" v-else>未核查</Tag>
              </div>
              <div>
                <Row>
                  <Col span="18" style="width: calc(100% - 175px);">
                  <!--                    <div>-->
                  <!--                      核查状态：-->
                  <!--                      <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemCheckState == 1">已核查</Tag>-->
                  <!--                      <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemCheckState == -1">已退回</Tag>-->
                  <!--                      <Tag color="error" v-else>未核查</Tag>-->
                  <!--                    </div>-->
                  <div>
                    核查结果：
                    <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemCheckLv == 0">无风险</Tag>
                    <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemCheckLv == 1">一般隐患</Tag>
                    <Tag color="error" v-else-if="item.riskInspectItem.riskInspectItemCheckLv == 2">重大隐患</Tag>
                    <Tag color="warning" v-else>无结果</Tag>
                  </div>
                  <div v-if="item.riskInspectItem.riskInspectItemCheckState != -1">
                    整改措施：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemCheckMeasures ? item.riskInspectItem.riskInspectItemCheckMeasures : '--' }}</span>
                  </div>
                  <div v-if="item.riskInspectItem.riskInspectItemCheckState != -1">
                    核查意见：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemCheckOpinion ? item.riskInspectItem.riskInspectItemCheckOpinion : '--' }}</span>
                  </div>
                  <div>
                    核查描述：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemCheckContext ? item.riskInspectItem.riskInspectItemCheckContext : '--' }}</span>
                  </div>
                  <div>
                    核查时间：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemCheckTime ? item.riskInspectItem.riskInspectItemCheckTime : '--' }}</span>
                  </div>
                  </Col>
                  <Col span="6" style="width: 175px;" v-if="item.riskInspectItem.riskInspectItemCheckState != -1">
                  <div>
                    <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!item.riskInspectItem.riskInspectItemCheckSign">
                      <div class="_wz_insertimage" style="display: block;width: 100%;">
                        <Image :src="!!item.riskInspectItem.riskInspectItemCheckSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemCheckSign : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.riskInspectItem.riskInspectItemCheckSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemCheckSign : 'img/zwtpxd.png']" />
                      </div>
                    </div>
                  </div>
                  </Col>
                  <Col span="24" v-if="item.riskInspectItem.riskInspectItemCheckState != -1">
                  <div>
                    核查图片：
                    <template v-if="!!item.riskInspectItem.riskInspectItemCheckImg">
                      <div style="width: 50px;overflow: hidden;display: inline-block;margin-right: 4px;vertical-align: top;" v-for="(item, index) in JSON.parse(item.riskInspectItem.riskInspectItemCheckImg)">
                        <div class="_wz_insertimage" style="display: block;width: 50px;height: 35px;">
                          <Image :src="!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png']" />
                        </div>
                      </div>
                    </template>
                  </div>
                  </Col>
                </Row>
              </div>
            </Card>
          </template>
          <template v-if="item.riskInspectItemProcess == 3">
            <Card dis-hover :bordered="true" style="margin:0 0 10px;">
              <p slot="title">隐患整改（{{ item.riskInspectItem.riskInspectItemHandleUserName }} -- {{ item.riskInspectItem.riskInspectItemHandleInOrgName }}）</p>
              <div slot="extra">
                <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemHandleState == 1">已整改</Tag>
                <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemHandleState == -1">已退回</Tag>
                <Tag color="error" v-else>未整改</Tag>
              </div>
              <div>
                <Row>
                  <Col span="18" style="width: calc(100% - 175px);">
                  <!--                    <div>-->
                  <!--                      整改状态：-->
                  <!--                      <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemHandleState == 1">已整改</Tag>-->
                  <!--                      <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemHandleState == -1">已退回</Tag>-->
                  <!--                      <Tag color="error" v-else>未整改</Tag>-->
                  <!--                    </div>-->
                  <div v-if="item.riskInspectItem.riskInspectItemHandleState != -1">
                    整改资金：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemHandlePrice ? item.riskInspectItem.riskInspectItemHandlePrice : '--' }}</span>
                  </div>
                  <div v-if="item.riskInspectItem.riskInspectItemHandleState != -1">
                    整改措施：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemHandleMeasures ? item.riskInspectItem.riskInspectItemHandleMeasures : '--' }}</span>
                  </div>
                  <div v-if="item.riskInspectItem.riskInspectItemHandleState != -1">
                    整改情况：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemHandleSituation ? item.riskInspectItem.riskInspectItemHandleSituation : '--' }}</span>
                  </div>
                  <div>
                    整改描述：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemHandleContext ? item.riskInspectItem.riskInspectItemHandleContext : '--' }}</span>
                  </div>
                  <div>
                    整改时间：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemHandleTime ? item.riskInspectItem.riskInspectItemHandleTime : '--' }}</span>
                  </div>
                  </Col>
                  <Col span="6" style="width: 175px;" v-if="item.riskInspectItem.riskInspectItemHandleState != -1">
                  <div>
                    <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!item.riskInspectItem.riskInspectItemHandleSign">
                      <div class="_wz_insertimage" style="display: block;width: 100%;">
                        <Image :src="!!item.riskInspectItem.riskInspectItemHandleSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemHandleSign : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.riskInspectItem.riskInspectItemHandleSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemHandleSign : 'img/zwtpxd.png']" />
                      </div>
                    </div>
                  </div>
                  </Col>
                  <Col span="24" v-if="item.riskInspectItem.riskInspectItemHandleState != -1">
                  <div>
                    整改图片：
                    <template v-if="!!item.riskInspectItem.riskInspectItemHandleImg">
                      <div style="width: 50px;overflow: hidden;display: inline-block;margin-right: 4px;vertical-align: top;" v-for="(item, index) in JSON.parse(item.riskInspectItem.riskInspectItemHandleImg)">
                        <div class="_wz_insertimage" style="display: block;width: 50px;height: 35px;">
                          <Image :src="!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png']" />
                        </div>
                      </div>
                    </template>
                  </div>
                  </Col>
                </Row>
              </div>
            </Card>
          </template>
          <template v-if="item.riskInspectItemProcess == 4">
            <Card dis-hover :bordered="true" style="margin:0 0 10px;">
              <p slot="title">隐患验收（{{ item.riskInspectItem.riskInspectItemReviewUserName }} -- {{ item.riskInspectItem.riskInspectItemReviewInOrgName }}）</p>
              <div slot="extra">
                <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemReviewState == 1">已验收</Tag>
                <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemReviewState == -1">已退回</Tag>
                <Tag color="error" v-else>未验收</Tag>
              </div>
              <div>
                <Row>
                  <Col span="18" style="width: calc(100% - 175px);">
                  <!--                    <div>-->
                  <!--                      验收状态：-->
                  <!--                      <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemReviewState == 1">已验收</Tag>-->
                  <!--                      <Tag color="warning" v-else-if="item.riskInspectItem.riskInspectItemReviewState == -1">已退回</Tag>-->
                  <!--                      <Tag color="error" v-else>未验收</Tag>-->
                  <!--                    </div>-->
                  <div>
                    验收结果：
                    <Tag color="primary" v-if="item.riskInspectItem.riskInspectItemReviewResult == 1">通过</Tag>
                    <Tag color="error" v-else>不通过</Tag>
                  </div>
                  <div>
                    验收意见：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemReviewOpinion ? item.riskInspectItem.riskInspectItemReviewOpinion : '--' }}</span>
                  </div>
                  <div>
                    验收描述：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemReviewContext ? item.riskInspectItem.riskInspectItemReviewContext : '--' }}</span>
                  </div>
                  <div>
                    验收文件：
                    <template v-if="!!item.riskInspectItem.riskInspectItemReviewFile">
                      <Button type="primary" @click="downloadFile(item.riskInspectItem.riskInspectItemReviewFile)">下载文件</Button>
                    </template>
                    <template v-else>--</template>
                  </div>
                  <div>
                    验收时间：<span class="_wz_ztList_cont_span">{{ !!item.riskInspectItem.riskInspectItemReviewTime ? item.riskInspectItem.riskInspectItemReviewTime : '--' }}</span>
                  </div>
                  </Col>
                  <Col span="6" style="width: 175px;">
                  <div>
                    <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!item.riskInspectItem.riskInspectItemReviewSign">
                      <div class="_wz_insertimage" style="display: block;width: 100%;">
                        <Image :src="!!item.riskInspectItem.riskInspectItemReviewSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemReviewSign : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.riskInspectItem.riskInspectItemReviewSign ? apiUrl.imgUrl + item.riskInspectItem.riskInspectItemReviewSign : 'img/zwtpxd.png']" />
                      </div>
                    </div>
                  </div>
                  </Col>
                  <Col span="24">
                  <div>
                    验收图片：
                    <template v-if="!!item.riskInspectItem.riskInspectItemReviewImg">
                      <div style="width: 50px;overflow: hidden;display: inline-block;margin-right: 4px;vertical-align: top;" v-for="(item, index) in JSON.parse(item.riskInspectItem.riskInspectItemReviewImg)">
                        <div class="_wz_insertimage" style="display: block;width: 50px;height: 35px;">
                          <Image :src="!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item : 'img/zwtpxd.png']" />
                        </div>
                      </div>
                    </template>
                  </div>
                  </Col>
                </Row>
              </div>
            </Card>
          </template>
        </div>
      </TimelineItem>
    </template>
    <template v-else>
      <a-empty />
    </template>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'operationRecords',//组件名称
  components: {},//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      riskInspectItemProcessList: [],

    });


    const loadData = ()=>{

      $axios.post(apiUrl.riskInspectRiskInspectItemProcessList,{riskInspectItemUuid: props.selectData.uuid}).then((res) => {
        if (!!res) {
          state.riskInspectItemProcessList = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }


    //监听
    watch(() => props.selectData,(news, old) => {
      loadData()
    },{deep: true});


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})
</script>
<style lang="less">
._wz_operationRecords {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
    }
  }


  ._wz_ztList_cont {
    letter-spacing: 1px;
    line-height: 30px;

    ._wz_ztList_cont_span {
      margin: 0 10px 0 0;
      color: #01AAED;
      word-break: break-all;
    }
  }
}
</style>
